<template>
	<view>
		<uni-popup ref="popup" @change="onPopupChange" :type="popup" :isMaskClick="isMaskClick">
			<view class='box' :style="(popup=='bottom'?'border-bottom-left-radius: 0;border-bottom-right-radius: 0;':'')+(bottom?'margin-bottom:'+bottom+';':'')+boxStyle" :class="boxClass">
				<view class='boxHead'>
					<text class="caption" v-if="dialog.title">{{dialog.title}}</text>
					<view class="windowBtn">
						<uni-icons type="closeempty" size="20" color='#ccc' @click="onCancel()"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true"  style="max-height: 80vh;" class="margin-top-15">
					<view class='boxBody' v-if="content">
						<mp-html :content="content"></mp-html>
					</view>
					<slot></slot>
				</scroll-view>
				
				<view class="boxFooter margin-top-20" v-if="cancelEnable || okEnable">
					<button v-if="cancelEnable" style='color:white;background:#FF9700' @click="onCancel()">{{dialog.cancel}}</button>
					<button v-if="okEnable" :disabled="okDisable" style='color:white;background:#00a4ff' @click="onConfirm()">{{dialog.ok}}</button>
				</view>	
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'PocketPopupDialog',
		props: {
			title: {
				type: String,
				default: '提示'
			},
			html: {
				type: String,
				default: ''
			},
			bottom: {
				type: String,
				default: '0px'
			},
			popup: {
				type: [String],
				default () {
					return 'center'
				}
			},
			boxClass: {
				type: String,
				default: ''
			},
			boxStyle: {
				type: String,
				default: ''
			},
			/* 单选还是多选 */
			isMaskClick: {
				type: Boolean,
				default () {
					return true
				}
			},
			/* 确认按钮 */
			okTitle: {
				type: String,
				default: ''
			},
			okDisable: {
				type: Boolean,
				default () {
					return false
				}
			},
			/* 确认按钮 */
			cancelTitle: {
				type: String,
				default: ''
			},
		},
		watch:{
			html: {
				handler(newVal) {
					this.content = newVal;
				},
				immediate: true
			},
			title: {
				handler(newVal) {
					this.dialog.title = newVal;
				},
				immediate: true
			},
			okTitle: {
				handler(newVal) {
					this.dialog.ok = newVal;
				},
				immediate: true
			},
			cancelTitle: {
				handler(newVal) {
					this.dialog.cancel = newVal;
				},
				immediate: true
			},
			
		},
		computed: {

			okEnable() {
				let ok = this.dialog.ok ;
				return ok && parseInt(ok.length)>0 && 'true,false'.indexOf(ok)<0;
			},
			cancelEnable() {
				let cancel = this.dialog.cancel ;
				return cancel && parseInt(cancel.length)>0 && 'true,false'.indexOf(cancel)<0;
			},
		},
		data() {
			return {
				content:'',
				resolve:false,
				reject:false,
				dialog:{
					title:'提示',
					ok:'确认',
					cancel:'取消',
				}
			}
		},
		mounted() {
			// 渲染

		},
		methods: {
			onPopupChange(e) {
				// 捕捉uniPopup点击遮罩层关闭事件
				if (!e.show) {
					if (this.isMaskClose) {
						this.$emit('cancel');
					}
					this.isMaskClose = true
				}
				this.$emit("popup_change", e);
			},
			onCancel() {
				if (this.reject){
					this.reject();
				}				
				this.$emit('cancel');
				this.close();
			},
			onConfirm() {
				if (this.resolve){
					this.resolve();
				}
				this.$emit('confirm');
				this.close();
			},
		
			open(content='',title='',ok='',cancel='') {
				if (content){
					this.content = content;
				}
				if (typeof(title) == 'object'){
					if (title.title){
						this.dialog.title = title.title;
					}
					if (title.ok){
						this.dialog.ok = title.ok;
					}
					if (title.cancel){
						this.dialog.cancel = title.cancel;
					}
				}else{
					if (title){
						this.dialog.title = title;
					}
					if (ok){
						this.dialog.ok = ok;
					}
					if (cancel){
						this.dialog.cancel = cancel;
					}
				}
				
				let that = this;
				return new Promise((resolve, reject) => {
					that.resolve = resolve;
					that.reject = reject;
					that.$refs.popup.open();
					that.$emit('open');
				});

			},
			
			/**
			 * 关闭窗口
			 */
			close() {
				this.$refs.popup.close();
				this.$emit('close');
			},
		
		}
	}
</script>

